// 子路由：父级挂载不变的组件 要切换的子路由都是单独的路由
// 不挂载到父级，但是父组件要声明<router-view/>在按钮切换的组件注册跳转事件
<template>
    <div class="twonav-wrap">
        <span :class="{active:num==index}" v-for="(item,index) in listz" @click="tabs(index)">{{item.apps}}</span>
    </div>
</template>

<script>
export default {
    name: 'twonav',
    data() {
        return {
            num:0,
            listz:[
                {
                    "apps":'正在热映'
                },
                {
                    "apps":'即将上映'
                },
                {
                    "apps":'经典影片'
                }
            ]
        };
    },
    mounted() {
        
    },
    methods: {
        tabs(index){
            this.num = index
            if(index==0){
                this.$router.replace('/movie/now')
            }else if(index==1){
                this.$router.replace('/movie/hot')
            }else if(index==2){
                this.$router.replace('/movie/sut')
            }
        }
    },
};
</script>

<style lang="scss" scoped>
    .twonav-wrap{
        margin-top: 80px;
        width: 100%;
        height: 60px;
        background: #464549;
        display: flex;
        justify-content: center;
        align-items: center;
        span:hover{
            color: #fff;
            cursor: pointer;
        }
        span{
            margin: 0 30px;
            color: #839898;
        }
    }
    .active{
        color: #ee4137!important;
    }
</style>